Skip to content

feat(design): apply ICP brand guidelines#130

Merged
marc0olo merged 2 commits into
mainfrom
infra/brand-guidelines-design
Apr 23, 2026
Merged

feat(design): apply ICP brand guidelines#130
marc0olo merged 2 commits into
mainfrom
infra/brand-guidelines-design

Conversation

@marc0olo
Copy link
Copy Markdown
Member

Summary

  • Switch docs theme from dark-first/purple to light-default/terracotta per ICP brand guidelines
  • Add Newsreader serif font for headings (500 weight, -0.015em tracking); Inter remains for body
  • Replace purple accent (#3b00b9) with terracotta (#cc5a2b light / #ff7a4d dark)
  • Replace pure-black backgrounds with parchment (#f8f5ef) and ink text (#1a1714)
  • Custom ThemeProvider overrides Starlight default: light mode always, never auto-switches on prefers-color-scheme; dark mode opt-in only
  • Collapse skills-banner hardcoded hex values to --icp-* CSS custom properties
  • Add icp-brand-guidelines skill to repo under .agents/skills/ (symlinked from .claude/skills/)
  • Update AGENTS.md and .docs-plan/decisions.md to document the skill and design decisions

Voice and web3 jargon changes are out of scope for this PR — follow-up planned.

Sync recommendation

hand-written

- Switch to light mode as default (custom ThemeProvider; never auto-switches on prefers-color-scheme)
- Replace purple accent with terracotta (#cc5a2b light, #ff7a4d dark / ember)
- Replace pure black bg with parchment (#f8f5ef) and ink text (#1a1714)
- Add Newsreader serif font for headings (500 weight, -0.015em tracking)
- Add dark mode token set: deep bark bg, bone text, ember accent
- Install @fontsource/newsreader (400, 400-italic, 500, 500-italic)
- Collapse skills-banner hardcoded colors to icp-brand CSS custom properties
Move from .claude/skills/ (untracked drop location) to .agents/skills/
so it follows the same pattern as all other committed skills.
Add symlink in .claude/skills/ pointing to .agents/skills/.

Update AGENTS.md sources table and skills section to document the skill.
Record design decisions in .docs-plan/decisions.md.
@marc0olo marc0olo merged commit 446775c into main Apr 23, 2026
1 check passed
@marc0olo marc0olo deleted the infra/brand-guidelines-design branch April 23, 2026 12:14
marc0olo added a commit that referenced this pull request Apr 23, 2026
## Summary

- Replaces old black/purple OG image with the new brand palette
- Parchment background (`#f8f5ef`), ink headline in Georgia serif
(`#1a1714`)
- Terracotta accent rule and label (`#cc5a2b`), muted tagline
(`#6b6660`)
- 1px rule border in `#e5ddcf`, muted footer text

Follows up on #130 (brand guidelines design PR) which updated the site
theme but missed the OG image.

## Sync recommendation

hand-written
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant